<template>
	<view class="outerView">
		<view class="qrCode">
			<view>核销码：{{orderDetails.verificationCode}}</view>
			<image :src="qrCodeSrc"></image>
		</view>
		<view class="textList">
			<view class="textTitle">
				维修信息
			</view>
			<view class="textOne">
				<view>维修单号:</view>
				<view>{{orderDetails.id}}</view>
			</view>
			<view class="textOne">
				<view>维修状态:</view>
				<view>{{ orderDetails.status === 0 ? '已预约' : (orderDetails.status === 1 ? '进行中' : (orderDetails.status === 2 ? '已完成' : '已取消')) }}</view>
				 
			</view>
			<view class="textOne">
				<view>车主姓名:</view>
				<view>{{orderDetails.name}}</view>
			</view>
			<view class="textOne">
				<view>联系方式:</view>
				<view>{{orderDetails.phone}}</view>
			</view>
			<view class="textOne">
				<view>维修方式:</view>
				<view>{{orderDetails.typee=="0"?"到店维修":"上门取车"}}</view>
			</view>
			<view class="textOne">
				<view>取车位置:</view>
				<view>{{orderDetails.location}}</view>
			</view>
			<view class="textOne">
				<view>预约日期:</view>
				<view>{{orderDetails.reservationTime}}</view>
			</view>
			<view class="textOne">
				<view>提交日期:</view>
				<view>{{orderDetails.submitTime}}</view>
			</view>
			<view class="textTitle">
				车辆信息
			</view>
			<view class="textOne">
				<view>车辆类型:</view>
				<view>{{orderDetails.carTypeId== 1 ? "A4" : orderDetails.carTypeId == 2 ? "A6" : orderDetails.carTypeId == 3 ? "A8" : orderDetails.carTypeId == 4 ? "glc" : orderDetails.carTypeId == 5 ? "gle" : orderDetails.carTypeId == 6 ? "汉" : orderDetails.carTypeId == 7 ? "秦" : "未知车型" }}</view>
			</view>
			<view class="textOne">
				<view>车牌号码:</view>
				<view class="carNum">{{orderDetails.carNum}}</view>
			</view>
			<view class="textOne">
				<view>车主姓名:</view>
				<view>{{orderDetails.name}}</view>
			</view>
			<view class="imageOne">
				<view>整车照片:</view>
				<image :src="orderDetails.vehiclePhotos"></image>
			</view>
			<view class="imageOne">
				<view>维修部位照片:</view>
				<image :src="orderDetails.repairPhotos"></image>
				<!-- <image src="/static/qiche1.jpg"></image>
				<image src="/static/qiche1.jpg"></image> -->
			</view>
		</view>
		<view class="example-body box">
			<button class="button popup-info" @click="dialogToggle()"><text
					class="button-text info-text">取消订单</text></button>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="info" cancelText="关闭" confirmText="同意" title="提示" content="确定取消预约吗？"
					@confirm="dialogConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
orderDetails: {},
			}
		},
		onLoad(options) {
			// console.log(options);
			uni.request({
				url: `http://localhost:9205/myRepair/` + options.orderId, // 替换为你的实际接口
				method: 'GET',
				header: {
					'authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImI0OWU4NmFkLTZhNTMtNGQyNS1iNzFkLTQ1NjBiOTE2ZTFhNSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.PHw5Ez00yg0Vk_Wx4zO3rnSUHe2znWiWOK2IhwFS80dqK02znBtDbe7GfAiuT3YOQSsnBdIi0O7fjprpExMxlg'
				},
				success: (res) => {
		console.log(res.data)
					// 将返回的订单详情保存到data中
					this.orderDetails = res.data.data;
					// console.log(this.orderDetails)
					// console.log(res)
				}
			});
		
		},
			computed: {
					// 动态生成二维码的图片src
					qrCodeSrc() {
						if (this.orderDetails.verificationImg) {
							// 加上Base64图片前缀
							return `data:image/png;base64,${this.orderDetails.verificationImg}`;
						}
						// 如果没有二维码图片，返回一个默认占位图或空字符串
						return '/static/qrCode.png'; 
					}
				},
		methods: {
			dialogToggle(type) {
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				console.log('点击确认')
				uni.request({
				     url: 'http://localhost:9205/myRepair/updateStatus',  // 替换为你的实际接口地址
				     method: 'PUT',
									header: {
										'authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImI0OWU4NmFkLTZhNTMtNGQyNS1iNzFkLTQ1NjBiOTE2ZTFhNSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.PHw5Ez00yg0Vk_Wx4zO3rnSUHe2znWiWOK2IhwFS80dqK02znBtDbe7GfAiuT3YOQSsnBdIi0O7fjprpExMxlg'
									},
				     data: {
				         status: this.status,
						 id:this.options.orderId
				        
				     },
				     success: (res) => {
						 console.log(this.options.orderId)
						 const orderId = this.options.orderId;
						 
						 uni.navigateTo({
						     url: `/pages/my/myMaintain/maintainRecord/cancelAppointment/cancelAppointment?orderId=${orderId}`
						 });
				     },
				  
				 });
			},
			// dialogToggle() {
			 // 维修完成后状态变为已完成
				// uni.request({
				//      url: 'http://localhost:9205/myRepair/updateStatus',  // 替换为你的实际接口地址
				//      method: 'PUT',
				// 					header: {
				// 						'authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjUwOGY3YWE4LWQ4OWMtNGZiZi1iNDQ1LWZjMDg3ZDQ2YzI2ZiIsInVzZXJuYW1lIjoiYWRtaW4ifQ.uJnUOiV9UhrlpUy7fjCgvHQI2oxZUoLGzS16QELxcrf71AjCql_x9ozFLoW5nbh_V_nWPEkU4vZwyS9otCgxPQ'
				// 					},
				//      data: {
				//          status: this.status,
				// 		 id:this.options.id
				        
				//      },
				//      success: (res) => {
						 
				//      },
				  
				//  });
			// },
			find(){
				
			}
		}
	}
</script>

<style>
	//二维码样式
	.qrCode {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		font-weight: bold;
		font-size: 14px;
	}

	.qrCode image {
		width: 250rpx;
		height: 250rpx;
		padding: 10rpx 100rpx;
	}

	//列表样式
	.textList {
		padding: 10rpx 40rpx;
	}

	.textTitle {
		padding: 5rpx 40rpx;
		font-weight: bold;
		font-size: 16px;
	}

	.textOne {
		display: flex;
	}

	.textOne view {
		padding: 5rpx 50rpx;
	}

	.imageOne {
		padding: 5rpx 50rpx;
	}

	.imageOne image {
		width: 180rpx;
		height: 120rpx;
		padding-right: 10rpx;
	}

	//按钮样式
	.box {
		/* background-color: #fff; */
		position: relative;
		width: 750rpx;
		height: 50px;
	}

	.button {
		@include flex;
		width: 202rpx;
		height: 60rpx;
		font-size: 14px;
		line-height: 60rpx;
		color: #488BFF;
		border: 1rpx solid #488BFF;
		position: absolute;
		right: 12rpx;
		bottom: 4rpx;
	}
</style>